<%@ taglib prefix="s" uri="/struts-tags"%>

<s:set name="theme" value="'simple'" scope="page" />

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>RSS Agregator</title>
        <link href="stylesheets/common.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="<s:url value="/js/libs/jquery-1.7.1.min.js" />"></script>
        <link type="text/css" href="<s:url value="/stylesheets/basic.css" />" rel="stylesheet" media="screen" />
    </head>
    <body>
        <jsp:include page="header.jsp"/>
        <!-- Start Main Content -->
        <div id="main" class="container">
			<div id="center" style="padding: 0 50px;">
            	<div id="basic-modal">
			        <h3 class="leftbox" style="width: 450px;">Choose categories:</h3>
			        <s:form action="saveCategories" theme="simple">
						<table>
							<tr>
								<td><label>List of Categories</label></td>
								<td></td>
								<td><label>Subscribe</label></td>
							</tr>
							<tr>
								<td width="40%"><s:select id="newCategories" name="newCategories" list="%{categories}" multiple="true" size="10" label="List of Categories" cssStyle="width:100%" labelposition="top"/></td>
								<td width="10%" valign="middle"><button id="addCategories">></button> <button id="removeCategories"> &lt; </button> </td>
								<td width="40%">
									<s:select id="subscribe" name="subscribe" list="%{subscribe}" multiple="true" size="10" label="Subscribe" cssStyle="width:100%" labelposition="top" emptyOption="escolha categorias"/>
								</td>
							</tr>
							<tr>
								<td><s:submit action="saveCategories" ></s:submit></td>
							</tr>
						</table>
			        </s:form>
			    </div>
           	</div>
		</div>
		
		<script type="text/javascript">
			$(document).ready(function(){
				$("#addCategories").click(function(){
					$( "#subscribe").append( $("#newCategories option:selected") );
					return false;
				});
				
				$("#removeCategories").click(function(){
					$("#newCategories").append( $("#subscribe option:selected") );
					return false;
				});
			})
		</script>
	</body>
</html>